import { Button, Input } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import AddAndDetail from "../add-and-detail";
import SearchList, { type SearchListExpose } from "../search-list";
import useControl from "../add-and-detail/useControl";
import type { ProColumnsType } from "../interface";

export default defineComponent({
  setup(props, ctx) {
    const { title, open, currRow, mode } = useControl();
    const searchListRef = ref<SearchListExpose>();

    const tablecolumns: ProColumnsType<{
      name: string;
      phone: string;
      avatar: string;
      createTime: number;
    }> = [
      {
        title: "姓名",
        dataIndex: "name",
        type: "input",
      },
      {
        title: "手机号ffffffggg",
        dataIndex: "phone",
        type: "input",
      },
      {
        title: "性别",
        dataIndex: "sex",
        type: "select",
        options: [
          {
            label: "男sdfsdf",
            value: "1",
          },
          {
            label: "女sdfsf",
            value: "2",
          },
        ],
        hideInTable: true,
      },
      {
        title: "不显示在表单中的item",
        dataIndex: "createTime",
        hideInForm: true,
        textRender({ text, record, index, column }) {
          return new Date(text).toLocaleString();
        },
      },
      {
        fixed: "right",
        title: "操作",
        dataIndex: "ddd",
        hideInForm: true,
        width: 150,
        textRender({ text, record, index, column }) {
          return (
            <div class="flex gap-[10px]">
              <Button
                type="link"
                size="small"
                onClick={() => {
                  mode.value = "write";
                  currRow.value = record;
                  title.value = "编辑";
                  open.value = true;
                }}
              >
                编辑
              </Button>

              <Button
                type="link"
                size="small"
                onClick={() => {
                  mode.value = "read";
                  currRow.value = record;
                  title.value = "详情";
                  open.value = true;
                }}
              >
                详情
              </Button>
            </div>
          );
        },
      },
    ];

    const request = async (params: Record<string, any>) => {
      console.log("参数：", params);

      return {
        total: 11,
        current: 1,
        pageSize: 10,
        result: [
          {
            id: 1,
            name: "张三",
            phone: "13800000000",
            sex: 1,
            avatar: "https://picsum.photos/200/300",
            createTime: new Date().getTime(),
          },
          {
            id: 2,
            name: "李四",
            phone: "13800000000",
            sex: 2,
            avatar: "https://picsum.photos/200/300",
            createTime: new Date().getTime(),
          },
        ],
      };
    };

    const detailColumns: ProColumnsType<typeof currRow.value> = [
      {
        title: "基本信息",
        children: [
          {
            title: "input",
            dataIndex: "input",
            type: "input",
          },
          {
            title: "select",
            dataIndex: "select",
            type: "select",
            options: [
              {
                label: "男sdfsdf",
                value: "1",
              },
              {
                label: "其他",
                options: [
                  {
                    label: "女sdfsf",
                    value: "2",
                  },
                ],
              },
            ],
          },
          {
            title: "radio",
            dataIndex: "radio",
            type: "radio",
            options: [
              {
                label: "男sdfsdf",
                value: "1",
              },
              {
                label: "女sdfsf",
                value: "2",
              },
            ],
          },
          {
            title: "checkbox",
            dataIndex: "checkbox",
            type: "checkbox",
            options: [
              {
                label: "男sdfsdf",
                value: "1",
              },
              {
                label: "女sdfsf",
                value: "2",
              },
            ],
          },
          {
            title: "time",
            dataIndex: "time",
            type: "time",
          },
          {
            title: "timerange",
            dataIndex: "timerange",
            type: "timerange",
          },
          {
            title: "date",
            dataIndex: "date",
            type: "date",
          },
          {
            title: "daterange",
            dataIndex: "daterange",
            type: "daterange",
          },
        ],
      },
      {
        title: "其他信息",
        children: [
          {
            title: "image",
            dataIndex: "image",
            type: "image",
          },
          {
            title: "file",
            dataIndex: "file",
            type: "file",
          },
          {
            title: "table",
            dataIndex: "table",
            type: "table",
            fieldProps: {
              columns: [
                {
                  title: "姓名",
                  dataIndex: "name",
                  type: "input",
                },
                {
                  title: "手机号",
                  dataIndex: "phone",
                  type: "input",
                },
              ],
            },
          },
          {
            title: "fieldRender",
            dataIndex: "fieldRender",
            fieldRender({ record }) {
              return <Input v-model:value={record.fieldRender} />;
            },
            textRender({ record }) {
              return <div>{record.fieldRender}</div>;
            },
          },
        ],
      },
    ];

    const detailRequest = () => {
      return Promise.resolve({
        id: 3,
        name: "张三",
        phone: "13800000000",
        avatar: "https://picsum.photos/200/300",
        createTime: new Date().getTime(),
      });
    };

    const finish = (values: Record<string, any>) => {
      console.log("提交参数：", values);
      searchListRef.value?.reset();
      return Promise.resolve(true);
    };

    return () => (
      <div>
        <SearchList
          ref={searchListRef}
          columns={tablecolumns}
          request={request}
          initialValues={{ name: "张44" }}
        >
          {{
            submitBtns: (submitBtns) => [
              ...submitBtns,
              <Button
                onClick={() => {
                  mode.value = "write";
                  currRow.value = null;
                  title.value = "新增";
                  open.value = true;
                }}
              >
                新增
              </Button>,
            ],
          }}
        </SearchList>

        <AddAndDetail
          mode={mode.value}
          title={title.value}
          v-model:open={open.value}
          columns={detailColumns}
          request={detailRequest}
          onFinish={finish}
        />
      </div>
    );
  },
});
